// 群聊天对话框
import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
import com.yihu.xchat.model 1.0

import "../../../js/view/subview/GroupSessionView.js" as Js
import "../../widgets" as Widgets

Rectangle {
    id: groupChattingView

    // 封装私有属性，由内部JS才可以使用
    Item {
        id: props

        property var sessionModel                   // 会话模型
    }

    // 方法，给外部使用
    readonly property var setSession: Js.setSession
    readonly property var sendMessage: Js.sendMessage

    // 属性，给外部使用
    readonly property var sessionModel: props.sessionModel

    SplitView {
        anchors.fill: parent

        // 左侧栏
        Rectangle {
            id: leftRect
            width: parent.width
            height: parent.height

            // 群照片,名称与成员列表按钮
            Rectangle {
                id: groupInfoSection

                anchors.top: parent.top
                anchors.topMargin: 5
                anchors.right: parent.right
                anchors.rightMargin: 5
                anchors.bottomMargin: 5
                anchors.left: parent.left

                height: 60

                // 照片
                Rectangle{
                    id: groupPhotoRect

                    anchors.verticalCenter: parent.verticalCenter

                    x: 10
                    width: 50
                    height: 50

                    radius: width / 2
                    border.color: "black"

                    Image {
                        id: groupPhoto

                        width: parent.width
                        height: parent.width
                    }
                }

                // 名称
                Text {
                    id: groupName

                    anchors.left: groupPhotoRect.right
                    anchors.verticalCenter: parent.verticalCenter

                    text: ""

                    font.pointSize: 26
                    font.bold: true
                }

                // 组工具按钮
                Image {
                    source: "qrc:/images/group_more.png"

                    width: 24
                    height: 24

                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: parent.anchors.bottomMargin

                    MouseArea {
                        anchors.fill: parent

                        onClicked: {
                            //console.debug("Resizing group memebers rectangle.");
                            var result = rightRect.visible ? 0 : 150;
                            rightRect.width = result;
                            rightRect.visible = !rightRect.visible;

                            leftRect.width = rightRect.visible ? leftRect.parent.width - result : leftRect.parent.width;
                        }
                    }
                }
            }

            // 聊天输入区域
            Widgets.ChatBox {
                id: chattingWidget

                anchors.top: groupInfoSection.bottom
                anchors.right: groupInfoSection.right
                anchors.bottom: parent.bottom
                anchors.left: groupInfoSection.left

                width: parent.width
                Layout.fillHeight: true
                height: groupChattingView.height - groupInfoSection.height
            }
        }

        // 右侧栏，默认隐藏
        Rectangle {
            id: rightRect

            visible: false
            width: 0

            Widgets.GroupMembers {
                id: groupMembersWidget

                anchors.fill: parent
            }
        }
    }
}
